<template>
  <view>
    <into-back></into-back>
    <view class="center-box">
      <view class="img">
        <kt-image
            @load="logoLoad()"
            @error="logoLoad()"
            mode="widthFix"
            :src="$kt.file.byPath('image/logo.png')"></kt-image>
      </view>
    </view>
    <view
        v-show="isShowProgress"
        class="bottom">
      <view v-if="!isBack">
        <!--   进度条   -->
        <view class="progress-box">
          <view
              :style="{
              width: progress+'%'
            }"
              class="progress"
              :class="{
              'progress-error':isErrorShow
            }"
          ></view>
        </view>

        <view v-if="!isErrorShow">
          <view
              v-if="!text"
              class="progress-text">{{ progress }}%
          </view>
          <view
              v-if="text"
              class="progress-text-2">{{ text }}
          </view>
        </view>

      </view>
      <view
          v-if="isErrorShow"
          class="error-text"
      >{{ errorText }}
      </view>
      <view v-if="isBack">
        <view class="progress-text-2">再次返回退出页面</view>
      </view>
    </view>


    <!--  用来加载照片的view，不显示，只是用作临时加载  -->
    <view v-if="isLogoStart">
      <image
          v-for="(item,index) in imageListOfInto"
          :key="index"
          v-if="index === imageListIndex"
          :style="{
            'opacity': 0,
          }"
          @load="imageLoad(index)"
          @error="imageLoad(index)"
          :src="item"></image>
    </view>


  </view>
</template>

<script>
import IntoBack from "./components/IntoBack.vue";
import imageListOfInto from "@/pages/into/js/imageListOfInto";
import requestOfInto from "@/pages/into/js/requestOfInto";

export default {
  components: {
    IntoBack
  },
  data() {
    return {
      isLogoStart: false,
      isShowProgress: false,
      // 是否显示进度条
      progress: 0,
      timer: null,
      imageListIndex: 0,
      // 用来加载的图片
      imageListOfInto,
      imageLoadIndexList: [],
      startTime: 0,
      text: "",
      isTo: false,
      isBack: false,
      isErrorShow: false,
      errorText: "",
      errorTimeout: null,
    };
  },
  mounted() {
    setTimeout(() => {
      this.isShowProgress = true;
      setTimeout(() => {
        // 为了让进度更好的效果
        this.progressAdd();
      });
    }, 2000);
    this.$kt.event.on("into:request", (data) => {
      this.text = data;
    });


  },

  onShow() {
    if (this.isTo) {
      this.isBack = true;
      setTimeout(() => {
        console.log("----");
        this.toTo();
      }, 1500);
      return;
    }
  },
  methods: {
    toTo() {
      this.$kt.userAccount.requestSelf().then(() => {
        this.$kt.router.reLaunch("/pages/body/body");
      }).catch((err) => {
        this.$kt.router.reLaunch("/pages/body/body");
      });
    },
    async progressAdd() {
      for (let i = 0; i < 100; i++) {
        // 如果加载的图片数量等于总图片数量，那么就不再加载
        if (this.imageLoadIndexList.length >= this.imageListOfInto.length) {
          break;
        }

        // 等于加载的到下一张图片的比例
        let maxNumber = Math.floor(((this.imageLoadIndexList.length - (-1)) / this.imageListOfInto.length) * 100);
        console.log("maxNumber", maxNumber);
        if (maxNumber >= 100) {
          maxNumber = 100;
        }
        await new Promise((resolve) => {
          // 随机数100到300
          let random = Math.floor(Math.random() * 200 + 100);
          setTimeout(() => {
            let progress = this.progress + 1;
            if (progress >= maxNumber) {
              progress = maxNumber;
            }
            this.progress = progress;
            resolve();
          }, random);
        })
      }
    },
    /**
     * 当logo加载完成后，才开始加载其它
     */
    logoLoad() {
      this.isLogoStart = true;
      this.startTime = new Date().getTime();
      if (this.isShowProgress) {
        setTimeout(() => {
          if (this.isTo) {
            return;
          }
          this.isTo = true;
          this.toTo();
        }, 5000);
      }
    },
    imageLoad(index) {
      this.imageLoadIndexList.push(index);
      this.imageListIndex++;
      console.log("加载了图片：", this.imageLoadIndexList.length);
      // 进度条是根据加载的图片数量来计算的
      this.progress = Math.floor((this.imageLoadIndexList.length / this.imageListOfInto.length) * 100);
      if (this.imageLoadIndexList.length >= this.imageListOfInto.length - 1) {
        this.progress = 100;
      }
      if (this.imageListIndex >= this.imageListOfInto.length - 1) {
        this.progress = 100;
        let endTime = new Date().getTime();
        let time = endTime - this.startTime;
        console.log("加载图片耗时：", time);
        console.log("加载完成");
        // 进行网络请求
        requestOfInto.send().then(() => {
          this.progress = 100;
          console.log("------")
          if (this.isTo) {
            return;
          }
          this.isTo = true;
          this.toTo();
        });

        return;

      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  font-size: 30rpx;
  z-index: 999;
  color: #000000;
  width: 100%;
  text-align: center;
  padding: 20rpx 60rpx 20rpx 60rpx;
  box-sizing: border-box;

  .progress-box {
    width: 80%;
    height: 20rpx;
    color: #FFFFFF;
    left: 0;
    margin: 0 auto;
    //background-color: #f2f2f2;
    background-color: rgba(0, 0, 0, .8);
    border: 1px solid #FFFFFF;
    border-radius: 12rpx;
    margin-top: 10rpx;

    .progress {
      width: 0%;
      height: 100%;
      //background-color: #000000;
      background-color: rgba(255, 255, 255, .8);
      border-radius: 10rpx;
    }
  }
}

.progress-text {
  color: #FFFFFF;
}

.center-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;

  .img {
    width: 300rpx;
    height: 300rpx;
    // 动画
    animation: into-rotate 2s linear infinite;
  }
}

@keyframes into-rotate {
  0% {
    //transform: rotate(0deg);
    opacity: 1;
    //transform: rotate(0deg);
  }
  25% {
    //transform: rotate(45deg);
    opacity: 0.5;
  }
  50% {
    //transform: rotate(0deg);
    opacity: 1;
  }
  75% {
    //transform: rotate(-45deg);
    opacity: 0.5;
  }
  100% {
    //transform: rotate(0deg);
    opacity: 1;
    //transform: rotate(360deg);
  }
}

.progress-text-2 {
  color: rgba(255, 255, 255, .7)
}


</style>
